<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../core/include.inc.jsp"%>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>杭州智慧社区管理系统</title>
    <style type="text/css">
        html,body{width:100%;height:100%;overflow:hidden;}
        body{margin:0;padding:0;font:14px "Microsoft YaHei";color:#000;}
        div,h3,p,span,img,input,button{margin:0;padding:0;font-weight:normal;}
        img,input,button{border:none;background:none;}
        input,button{font:14px "Microsoft YaHei";appearance:none;-moz-appearance:none;-webkit-appearance:none;vertical-align:top;}
        .bg{width:100%;height:auto;}
        .wrap{width:580px;height:300px;position:absolute;left:50%;top:50%;margin:-150px 0 0 -290px;z-index:11;background-color:#1b1b1b;}
        .logo{width:240px;height:300px;line-height:300px;text-align:center;font-size:0;background:url(${app:getLocalUrl() }/assets/login/images/line.png) no-repeat right center;float:left;}
        .logo img{vertical-align:middle;margin-top:-5px;max-width: 150px;}
        .login{width:260px;height:300px;float:left;text-align:center;margin-left:35px;}
        .login h3{font-size:24px;color:#fff;line-height:80px;margin-top:5px;}
        .login h4{color:#fff;}
        .login p{width:260px;height:36px;line-height:36px;margin-bottom:15px;background:#fff;text-align:left;}
        .login p span{width:35px;height:36px;border-right:1px solid #d1d1d1;display:inline-block;background:no-repeat center center;}
        .login p .user{background-image:url(${app:getLocalUrl() }/assets/login/images/user.jpg);}
        .login p .pwd{background-image:url(${app:getLocalUrl() }/assets/login/images/pwd.jpg);}
        .login p input{width:224px;height:36px;line-height:20px;text-indent:12px;}
        .login p input:-webkit-autofill{-webkit-box-shadow: 0 0 0 1000px white inset;}
        .login button{width:100%;height:42px;line-height:42px;background:#4874b1;color:#fff;font-size:18px;cursor:pointer;}
    </style>
    <script type="text/javascript" src="${app:getLocalUrl() }/assets/login/js/jquery.js"></script>
</head>
<body>
<img src="" alt="" class="bg" />
<div class="wrap">
    <div class="logo"><!--<img src="${app:getLocalUrl() }/assets/login/images/logo.png" alt="" />--></div>
    <div class="login">
        <h3>杭州智慧社区管理系统</h3>
        <form method="post" action="login">
            <p><span class="user"></span><input type="text" name="username" placeholder="输入用户名" value="${username}"/></p>
            <p style="margin-bottom:35px;"><span class="pwd"></span><input type="password" name="password" placeholder="输入密码" /></p>
            <button>登录</button>
        </form>
        <h4>
            <c:if test="${msg!=null}">
                ${msg}
            </c:if>
        </h4>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        var pingkuan=$(window).width();
        var pinggao=$(window).height();
        function buju(){
            if((119*pingkuan/192)<pinggao){
                $('.bg').css({
                    width:'auto',
                    height:pinggao,
                    marginLeft:pingkuan/2-96*pinggao/119
                });
            }
        }
        buju();
    });
</script>